﻿<div class="row wrapper border-bottom white-bg page-heading"> <div class="col-lg-10"> <h2>创建流程模板</h2> <ol class="breadcrumb"> <li> <a href="index.html">首页</a> </li> <li> <a>工作流</a> </li> <li class="active"> <strong>流程申请</strong> </li> </ol> </div> <div class="col-lg-2"> </div> </div>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">

		<a rel="opener" href="pages/diagram_design.html?pname=bx1" target="_blank">创建流程模板</a>

		<div class="col-lg-12">
			<div style="float:right;margin-bottom:20px"><button type="submit" class="btn btn-warning" onclick="publishProcess()">发布流程</button></div>
		</div>

		<div class="tab" role="tabpanel">
			<!-- Nav tabs -->
			<ul id="modelTab" class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active">
					<a href="#tabDefine_1" role="tab" data-toggle="tab" onclick="tabDefine_1Click()">流程定义</a>
				</li>
				<li role="presentation" class="disabled">
					<a href="#tabDefine_2" role="tab" data-toggle="tab" onclick="tabDefine_2Click()">模型定义</a>
				</li>
				<li role="presentation" class="disabled">
					<a href="#tabDefine_3" role="tab" data-toggle="tab" onclick="tabDefine_3Click()">表单设计</a>
				</li>
				<li role="presentation" class="disabled">
					<a href="#tabDefine_4" role="tab" data-toggle="tab" onclick="tabDefine_4Click()">流转设计</a>
				</li>
			</ul>
			<!-- Tab panes -->
			<div class="tab-content tabs">
				<div role="tabpanel" class="tab-pane fade active in" id="tabDefine_1">
					<div class="row-min"><label class="control-label label-min">流程名称</label>
						<div class="control-min"><input id="processDisplayName" type="text" class="form-control" placeholder="中文名，发布后将不能修改"/></div>
					</div>
					<div class="row-min"><label class="control-label label-min">流程编码</label>
						<div class="control-min"><input id="processName" type="text" class="form-control" placeholder="英文标识，发布后将不能修改"/></div>
					</div>
					<div class="row-min"><label class="control-label label-min">流程图标</label>
						<div class="control-min"><input id="processIcon" type="text" class="form-control"/></div>
					</div>
					<div class="row-min"><label class="control-label label-min">流程描述</label>
						<div class="control-min"><input id="processRemark" type="text" class="form-control"/></div>
					</div>
					<div style="float:right"><button type="submit" class="btn btn-primary" onclick="onNewProcessClick(1)">创建</button></div>
				</div>
				<div role="tabpanel" class="tab-pane fade in" id="tabDefine_2">
					<div class="row-min">
						<button type="submit" class="btn btn-primary" onclick="modelConfClick()">配置模型</button>
						<button type="submit" class="btn btn-primary">选择模型</button>
					</div>
					<table id="modelTable" class="table table-striped table-bordered table-hover  dataTable">
						<thead>
						<tr>
							<th style="text-align:center;">模型Code</th>
							<th style="text-align:center;">模型名称</th>
							<th style="text-align:center;">修改日期</th>
							<th style="text-align:center;">操作</th>
						</tr>
						</thead>
					</table>
					<div style="float:right"><button type="submit" class="btn btn-primary" onclick="goFormDesignClick(2)">下一步</button></div>
				</div>
				<div role="tabpanel" class="tab-pane fade in" id="tabDefine_3">
					<div class="row-min">
						<button type="submit" class="btn btn-primary" onclick="formConfClick()">配置表单</button>
						<button type="submit" class="btn btn-primary">选择表单</button>
					</div>
					<table  id="formTable" class="table table-striped table-bordered table-hover  dataTable">
						<thead>
						<tr>
							<th style="text-align:center;">表单Code</th>
							<th style="text-align:center;">表单名称</th>
							<th style="text-align:center;">表单日期</th>
							<th style="text-align:center;">操作</th>
						</tr>
						</thead>
					</table>
					<div style="float:right"><button type="submit" class="btn btn-primary" onclick="goTransDesignClick(3)">下一步</button></div>
				</div>
				<div role="tabpanel" class="tab-pane fade in" id="tabDefine_4">
					<div style="text-align:center"><div>流程图展示</div><button type="submit" class="btn btn-primary" onclick="editFlowDesign(4)">编辑流程图</button></div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 必须有个外层div否则不显示 ？？？-->
<div>
<!-- 模态框（模型） -->
<div class="modal right fade" id="modelDlg">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">选择模型</h4>
			</div>
			<div class="modal-body">
				<input type="hidden" id="hdeRowJson"/>
				<div class="flow-info-box">
					<div class="box-icon">
						<i class="fa fa-file-text"></i>
					</div>
					<div class="box-desc">
						<p class="box-name" id="dialogDisplayName"></p><p class="box-code" id="dialogName"></p>
					</div>
				</div>
				<div class="row form-inline form-group">
					<div class="col-sm-4"><input type="text" id="tableName" class="form-control" placeholder="模型标识fm_开头" /></div>
					<div class="col-sm-4"><input type="text" id="tableMemo" class="form-control" placeholder="tableMemo" /></div>
					<label class="col-sm-2 control-label" style="padding-left:32px;padding-top:6px">是否主表</label>
					<div class="col-sm-2"><input type="checkbox" id="isMain"  class="js-switch" /></div>
				</div>
				<div class="form-box row">
					<div class="col-md-5 col-md-offset-7">
					<button type="button" id="dlgRowAdd" onclick="addData()" class="btn btn-white">添加数据</button>
					<button type="button" id="dlgRowSave" onclick="createNewModel()" class="btn btn-primary">保存数据</button>
					</div>
				</div>
				<div class="alert alert-warning">
					<span style="font-weight:700;line-height:18px;color:#E6A23C">模型字段限制</span>
					<p style="margin:5px 0 0;color:#E6A23C">文本-不超过250字符数量；浮点数-不超过2位小数</p>
				</div>
				<table id="tableData" class="table">
					<thead><tr><th>字段ID</th><th>字段描述</th><th>字段类型</th><th>必填项</th><th>操作</th></tr></thead>
					<tbody>
					<!--<tr>-->
						<!--<td><input type="text" name="fieldName" value="order_no" class="form-control"/></td>-->
						<!--<td><input type="text" name="memo" value="申请单编号" class="form-control"/></td>-->
						<!--<td><select name="memo" class="form-control" disabled><option value="nvarchar" selected>文本</option></select></td>-->
						<!--<td><div class="checkbox checkbox-success"><input type="checkbox" class="ic form-control styled" /><label></label></div></td>-->
						<!--<td></td>-->
					<!--</tr>-->
					<!--<tr>-->
						<!--<td><input type="text" name="fieldName" value="emp_id" class="form-control"/></td>-->
						<!--<td><input type="text" name="memo" value="申请人ID" class="form-control" /></td>-->
						<!--<td><select name="memo" class="form-control" disabled><option value="nvarchar" selected>文本</option></select></td>-->
						<!--<td><div class="checkbox checkbox-success"><input type="checkbox" class="ic form-control styled" /><label></label></div></td>-->
						<!--<td></td>-->
					<!--</tr>-->
					<!--<tr>-->
						<!--<td><input type="text" name="fieldName" value="dept_code" class="form-control" /></td>-->
						<!--<td><input type="text" name="memo" value="所在部门编码" class="form-control" /></td>-->
						<!--<td><select name="memo" class="form-control" disabled><option value="int" selected>整型</option></select></td>-->
						<!--<td><div class="checkbox checkbox-success"><input type="checkbox" class="ic form-control styled" /><label></label></div></td>-->
						<!--<td></td>-->
					<!--</tr>-->
					</tbody>
				</table>
			<!--<div class="modal-footer">-->
				<!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
				<!--<button type="button" id="dlgModelSaveOrUpdate" class="btn btn-primary">保存</button>-->
			<!--</div>-->
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="formConfDlg">
  <div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			<h4 class="modal-title">选择表单</h4>
		</div>
		<div class="modal-body">
			<div class="flow-info-box">
				<div class="box-icon">
					<i class="fa fa-file-text"></i>
				</div>
				<div class="box-desc">
					<p class="box-name" id="dialogProcessDisplayName"></p><p class="box-code" id="dialogProcessName"></p>
				</div>
			</div>
			<div class="row form-inline form-group">
				<div class="col-sm-4"><input type="text" id="formCode" class="form-control" placeholder="表单标识" /></div>
				<div class="col-sm-8"><input type="text" id="formMemo" class="form-control" placeholder="表单描述" /></div>
			</div>
			<div class="row form-group">
				<label class="col-sm-2 control-label" style="padding-top:8px">表单显示按钮</label>
				<div class="col-sm-10"><select id="oprationBtns" class="form-control selectpicker" multiple data-style="btn-white">
					<option value="save">保存</option>
					<option value="submit">提交</option>
					<option value="agree">同意</option>
					<option value="reject">拒绝</option>
					<option value="add_task_before">前加签</option>
					<option value="transfer">转派</option>
					<option value="assist">协办</option>
				</select></div>
			</div>
			<div class="form-box row">
				<div class="col-md-3 col-md-offset-9">
					<button type="button" onclick="addData2DesignClick()" class="btn btn-primary">保存并编辑表单</button>
				</div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script id="ModleRow_Tpl" type="text/html">
	{{# for(var i=0; i<d.length; i++){ }}
	<tr>
		<td><input type="text" name="fieldName" value="{{d[i].fieldName}}" class="form-control" placeholder="英文名"/></td>
		<td><input type="text" name="memo" value="{{d[i].memo}}" class="form-control" placeholder="中文描述"/></td>
		<td><select name="dataType" class="form-control" {{# if (["order_no","emp_id","dept_code"].indexOf(d[i].fieldName)>=0) { }}disabled{{# } }}><option value="nvarchar" {{# if (d[i].dataType=="nvarchar") { }} selected {{# } }}>文本</option><option value="int" {{# if (d[i].dataType=="int") { }} selected {{# } }}>整型</option><option value="decimal" {{# if (d[i].dataType=="decimal") { }} selected {{# } }}>浮点型</option></select></td>
		<td><div class="checkbox checkbox-success"><input name="allowNull" type="checkbox" class="ic form-control styled" {{# if (!d[i].allowNull) { }} checked {{# } }}/><label></label></div></td>
		<td>{{# if (["order_no","emp_id","dept_code"].indexOf(d[i].fieldName)<0) { }}
			<button class="btn btn-danger btn-circle" type="button" onclick="deleteData(this,'{{i}}')"><i class="fa fa-trash"></i></button>
			{{# } }}
		</td>
	</tr>
	{{# } }}
</script>
<style type="text/css">		.container{padding: 2em 0;}
a:hover,a:focus{		    outline: none;		    text-decoration: none;		}
.tab .nav-tabs{
	position: relative;
	/*border-bottom:none;*/
	float: left; /*vivid*/
	width: 120px; /*vivid*/
}
.tab .nav-tabs li{		    text-align: center;		    margin-right: 10px;		}
.tab .nav-tabs li a{display: block;font-size: 16px;font-weight:600;color: #444;padding:10px 15px;
	background: transparent;margin-right: 0;border: none;border-radius: 0;overflow: hidden;
	position: relative;		    z-index: 1;		    transition: all 0.5s ease 0s;		}
.tab .nav-tabs li a:before{
	content: "";
	width:100%;
	/*height:3px;*/
	/*background:#1ab394; vivid*/
	position:absolute;
	/*top: 92%;*/
	top:0;
	left:0;
	transition: all 0.3s ease 0s;
	border-left: 2px solid #1ab394; /*vivid*/
}
.tab .nav-tabs li a:hover:before, .tab .nav-tabs li.active a:before, .tab .nav-tabs li.active a:hover:before{
	/*top:0;*/
	/*top:92%; vivid*/
	height:53px; /*vivid*/
}
.tab .nav-tabs li a:after{
	content: "";		    width: 100%;
	height: 100%;
	background: #fff;		    position: absolute;
	top: 100%;		    left: 0;		    z-index: -1;		    transition: all 0.3s ease 0s;		}
.tab .nav-tabs li a:hover:after, .tab .nav-tabs li.active a:after, .tab .nav-tabs li.active a:hover:after{
	/*top: 0;		*/
}
.nav-tabs li.active a,		.nav-tabs li.active a:focus,		.nav-tabs li.active a:hover,		.nav-tabs li a:hover{		    border: none;		}
.tab .tab-content{
	padding: 30px 15px 20px;		    background: #fff;
	font-size: 14px;		    color: #555;		    line-height: 26px;
	min-height: 500px; /*vivid*/
	/*margin-left: 120px; vivid*/
	float: right;margin-left:-120px;width: 100%;
}
.tab-pane{ margin-left: 120px }
.tab .tab-content h3{		    font-size: 24px;		    margin-top: 0;		}
@media only screen and (max-width: 479px){		    .tab .nav-tabs li{ width: 100%; }		}
.nav-tabs {
	border-bottom: none;
	border-left: 1px solid #ddd;  /*覆盖bootstrap.css border-bottom*/
}

.nav-tabs li.disabled a {
	color: #777;
}
.row-min{margin-bottom:20px;}
.label-min{float:left;width:80px;text-align:right}
.control-min{margin-left:100px}
</style>
<link href="lib/datatables/1.10.4/dataTables.bootstrap.css" rel="stylesheet">
<script src="lib/datatables/1.10.4/jquery.dataTables.js"></script>
<script src="lib/datatables/1.10.4/dataTables.bootstrap.js"></script>
<!--要在最下面设置全局参数-->
<script src="lib/datatables/1.10.4/dataTables.extend.js"></script>
<script src="lib/switchery/switchery.js"></script>
<link href="lib/switchery/switchery.css" rel="stylesheet">
<link href="js/page/form/control.css" rel="stylesheet">
<script src="lib/laytpl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<style>
.form-box{
	margin-top:20px;border-style:solid solid none;
	border-width:1px 0px;color:inherit;border-color:#e7eaec;border-image:none;
	padding:15px 20px 20px 20px
}
.flow-info-box {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(43,52,65,.05);
	margin-bottom: 20px;
	/*padding-left: 20px;*/
	/*padding-top: 15px;*/
	padding-bottom: 15px;

}
.box-icon{
	border-radius: 50%;
	position: relative;
	z-index: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	height: 34px;
	font-size: 16px;
	box-sizing: border-box;
	transition: .15s ease-out;
	color: rgba(43, 52, 66, 0.6);
	background-color: rgba(43, 52, 66, 0.1);
	margin-top: 5px;
}
.flow-info-body{
	margin-left: 20px; margin-right: 20px;
}
.box-desc{
	margin-left: 10px;
}
.box-name{
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 14px;
}
.box-code{
	margin-top: 0px;
	color: rgba(43,52,65,.4);
	font-size: 70%;
}
</style>
<style>
	.modal.left .modal-dialog,.modal.right .modal-dialog{position:fixed;margin:auto;width:620px;height:100%;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	.modal.left .modal-content,.modal.right .modal-content{height:100%;overflow-y:auto}
	.modal.left .modal-body,.modal.right .modal-body{padding:15px 15px 80px}
	.modal.left.fade .modal-dialog{left:-320px;-webkit-transition:opacity .3s linear,left .3s ease-out;-moz-transition:opacity .3s linear,left .3s ease-out;-o-transition:opacity .3s linear,left .3s ease-out;transition:opacity .3s linear,left .3s ease-out}
	.modal.left.fade.in .modal-dialog{left:0}
	.modal.right.fade .modal-dialog{right:-320px;-webkit-transition:opacity .3s linear,right .3s ease-out;-moz-transition:opacity .3s linear,right .3s ease-out;-o-transition:opacity .3s linear,right .3s ease-out;transition:opacity .3s linear,right .3s ease-out}
	.modal.right.fade.in .modal-dialog{right:0}
	.modal-content{border-radius:0;border:none}
	.modal-header{border-bottom-color:#eee;background-color:#fafafa}
</style>